<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <div class="header-left">
        <div class="logo-section">
          <img src="@/assets/imgs/logo.png" alt="logo" class="logo-img">
          <h1 class="system-title">阿尔茨海默症诊断系统</h1>
        </div>
        <div class="menu-toggle" @click="toggleSidebar">
          <el-icon :size="20" class="toggle-icon"><Fold v-if="!isCollapsed"/><Expand v-else/></el-icon>
        </div>
      </div>

      <div class="header-right">
        <div class="header-actions">
          <!-- 搜索框 -->
          <div class="search-box">
            <el-input
                v-model="searchText"
                placeholder="搜索..."
                :prefix-icon="Search"
                class="search-input"
                clearable
            >
              <template #suffix>
                <el-button class="search-btn" type="primary" link>
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
          </div>

          <!-- 用户信息 -->
          <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
              <div class="user-profile">
                <el-avatar
                    :size="36"
                    :src="data.user.avatar || defaultAvatar"
                    class="user-avatar"
                />
                <div class="user-details">
                  <span class="username">{{ data.user.name }}</span>
                  <el-tag
                      :type="roleTagType"
                      size="small"
                      effect="light"
                      class="role-tag"
                  >
                    {{ translatedRole }}
                  </el-tag>
                </div>
                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown">
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>个人信息
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>系统设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </header>

    <div class="app-body">
      <!-- 侧边栏 -->
      <aside class="app-sidebar" :class="{ collapsed: isCollapsed }">
        <el-scrollbar>
          <el-menu
              router
              :collapse="isCollapsed"
              :default-active="currentRoute"
              :unique-opened="true"
              class="sidebar-menu"
          >
            <el-menu-item index="/home">
              <el-icon><HomeFilled /></el-icon>
              <template #title>系统首页</template>
            </el-menu-item>

            <!-- 用户菜单 -->
            <template v-if="data.user.role === 'User'">
              <el-menu-item index="/mriImages">
                <el-icon><Picture /></el-icon>
                <template #title>我的脑影像</template>
              </el-menu-item>
              <el-menu-item index="/userDiagnosis">
                <el-icon><DocumentCopy /></el-icon>
                <template #title>我的诊断</template>
              </el-menu-item>
            </template>

            <!-- 管理员菜单 -->
            <template v-if="data.user.role === 'Admin'">
              <el-menu-item index="/approve">
                <el-icon><Select /></el-icon>
                <template #title>诊断批准</template>
              </el-menu-item>
              <el-sub-menu index="userManage">
                <template #title>
                  <el-icon><Memo /></el-icon>
                  <span>用户管理</span>
                </template>
                <el-menu-item index="/user">
                  <el-icon><User /></el-icon>
                  <span>普通用户</span>
                </el-menu-item>
                <el-menu-item index="/expert">
                  <el-icon><User /></el-icon>
                  <span>专家用户</span>
                </el-menu-item>
              </el-sub-menu>
            </template>

            <!-- 专家菜单 -->
            <template v-if="data.user.role === 'Expert'">
              <el-menu-item index="/expertDiagnosis">
                <el-icon><EditPen /></el-icon>
                <template #title>诊断处理</template>
              </el-menu-item>
              <el-menu-item index="/expertDiagnosed">
                <el-icon><DocumentCopy /></el-icon>
                <template #title>我已诊断</template>
              </el-menu-item>
            </template>

            <!-- 通用菜单 -->
            <el-sub-menu index="settings">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>个人设置</span>
              </template>
              <el-menu-item index="/person">
                <el-icon><User /></el-icon>
                <span>个人资料</span>
              </el-menu-item>
              <el-menu-item index="/password">
                <el-icon><Lock /></el-icon>
                <span>修改密码</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </aside>

      <!-- 主内容区 -->
      <main class="app-main" :class="{ 'sidebar-collapsed': isCollapsed }">
        <div class="main-header">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentMenuTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="main-content">
          <router-view @updateUser="updateUser" />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Fold,
  Expand,
  Search,
  User,
  Setting,
  SwitchButton,
  ArrowDown,
  HomeFilled,
  Picture,
  DocumentCopy,
  Select,
  Memo,
  EditPen,
  Lock,
  InfoFilled
} from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()
const route = useRoute()
const isCollapsed = ref(false)
const searchText = ref('')
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

// 响应式数据
const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}')
})

// 计算属性
const currentRoute = computed(() => route.path)
const currentMenuTitle = computed(() => {
  const menuMap = {
    '/home': '系统首页',
    '/mriImages': '我的脑影像',
    '/userDiagnosis': '我的诊断',
    '/approve': '诊断批准',
    '/expertDiagnosis': '诊断处理',
    '/user': '普通用户管理',
    '/expert': '专家用户管理',
    '/person': '个人资料',
    '/password': '修改密码'
  }
  return menuMap[route.path] || '未知页面'
})

const roleTagType = computed(() => {
  const typeMap = {
    Admin: 'danger',
    Expert: 'warning',
    User: 'success'
  }
  return typeMap[data.user.role] || 'info'
})

const translatedRole = computed(() => {
  const roles = {
    Admin: '管理员',
    User: '普通用户',
    Expert: '专家'
  }
  return roles[data.user.role] || '访客'
})

// 登录检查
if (!data.user?.id) {
  ElMessage.error('请先登录！')
  router.push('/login')
}

// 方法
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('system-user') || '{}')
}

const handleCommand = (command) => {
  switch (command) {
    case 'logout':
      confirmLogout()
      break
    case 'profile':
      router.push('/person')
      break
    case 'settings':
      router.push('/password')
      break
  }
}

const confirmLogout = () => {
  ElMessageBox.confirm('确定要退出系统吗？', '退出提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    logout()
  }).catch(() => {
    ElMessage.info('已取消退出')
  })
}

const logout = () => {
  request.post('/userLogout').then((res) => {
    if (res.code === '200') {
      ElMessage.success('退出成功')
      router.push('/login')
      localStorage.removeItem('system-user')
      localStorage.removeItem('token')
    } else {
      ElMessage.error(res.msg)
    }
  })
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f0f2f5;
}

/* 顶部导航样式 */
.app-header {
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 24px;
  border-right: 1px solid #f0f0f0;
}

.logo-img {
  width: 40px;
  height: 40px;
}

.system-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: #2c3e50;
  letter-spacing: 1px;
  position: relative;
  padding-left: 15px;
}

.system-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(to bottom, #1450aa, #4b91e0);
  border-radius: 2px;
}

.menu-toggle {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.menu-toggle:hover {
  background: #f5f7fa;
  color: #1890ff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 搜索框样式 */
.search-box {
  width: 240px;
  transition: all 0.3s;
}

.search-box:hover {
  width: 280px;
}

.search-input .el-input__wrapper {
  background-color: #f5f7fa;
  border-radius: 20px;
  padding-right: 8px;
}


/* 用户信息样式 */
.user-profile {
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.user-profile:hover {
  background: #f5f7fa;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

.role-tag {
  font-size: 12px;
  padding: 0 6px;
  height: 20px;
  line-height: 18px;
}

/* 侧边栏样式 */
.app-sidebar {
  width: 240px;
  height: calc(100vh - 60px);
  background: #fff;
  position: fixed;
  left: 0;
  top: 60px;
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
  transition: all 0.3s;
  z-index: 999;
}

.app-sidebar.collapsed {
  width: 64px;
}

.sidebar-menu {
  border-right: none;
}

/* 主内容区样式 */
.app-main {
  margin-left: 240px;
  padding: 24px;
  min-height: calc(100vh - 60px);
  margin-top: 60px;
  transition: all 0.3s;
}

.app-main.sidebar-collapsed {
  margin-left: 64px;
}

.main-header {
  margin-bottom: 24px;
}

.main-content {
  background: #fff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* 菜单样式优化 */
.sidebar-menu .el-menu-item.is-active {
  background-color: #e6f7ff !important;
  border-right: 3px solid #1890ff;
}

.sidebar-menu .el-menu-item:hover {
  background-color: #f5f7fa !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-box {
    width: 200px;
  }

  .search-box:hover {
    width: 240px;
  }
}

/* 响应式修改 */
@media (max-width: 992px) {
  .system-title {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .system-title {
    display: none;
  }

  .logo-section {
    border-right: none;
    padding-right: 0;
  }
}
</style>
